<template>
  <div class="quick-questions">
    <el-tag
      v-for="(q, idx) in questions"
      :key="idx"
      class="q-tag"
      @click="ask(q)"
      effect="plain"
      size="large"
    >{{ q }}</el-tag>
  </div>
</template>

<script setup>
const emit = defineEmits(['ask'])
const questions = [
  '今天天气怎么样？',
  '帮我写一份周报',
  '讲个笑话',
  '如何高效学习？',
  '推荐一部电影',
  '帮我生成一份工作计划'
]
function ask(q) {
  emit('ask', q)
}
</script>

<style scoped>
.quick-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.q-tag {
  cursor: pointer;
  font-size: 1.1rem;
  padding: 10px 18px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #6366f1;
  border: 1px solid #e0e7ff;
  transition: background 0.2s, color 0.2s;
}
.q-tag:hover {
  background: #6366f1;
  color: #fff;
}
</style> 